<template>
  <div class="icon-edit">
    <div
      v-for="(item,index) in list"
      :key="index"
      class="icon-container"
      v-on:click="handleClick(item)"
    >
      <Icon :type="item" class="icon-size"></Icon>
      <P>{{item}}</P>
    </div>
  </div>
</template>
<script>
import { getValueSetCode } from "@/api/valuesetCodeApi.js";
import locales from "./locales.js";
import icons from "./icons";

export default {
  name: "iconedit",
  mixins: [locales],
  data() {
    return {
      list: icons
    };
  },
  created: function() {
    this.$emit("SetPageWidth", 800);
    this.$emit("SetTitle", this.$t("module.function.editIcon"));
    this.$emit("SetPageActions", [
      {
        text: this.$t("common.close"),
        theme: "primary",
        handle: () => {
          this.$emit("Close");
        }
      }
    ]);
    this.getData();
  },
  methods: {
    handleClick(item) {
      this.$emit("Close", item);
    },
    getData() {
      // getValueSetCode("MENU_ICON")
      //   .then(response => {
      //     this.list = response.data;
      //   })
      //   .catch(error => {
      //     this.$message.error({
      //       content: error.message,
      //       duration: 3
      //     });
      //   });
    }
  }
};
</script>

<style  lang="less">
.icon-edit {
  overflow: hidden;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  .icon-container {
    float: left;
    padding-top: 20px;
    width: 100px;
    text-align: center;
    cursor: pointer;
    min-height: 50px;
    color: #5c6b77;
    position: relative;

    .ivu-icon {
      font-size: 20px;
    }
  }
}
</style>